// /**
//  * Copyright © 2013-2017 Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  ---------------------------------------------

@steps-wizard-attribute-entity__background: @color-white;
@steps-wizard-attribute-entity__border-color: @color-gray82;
@steps-wizard-attribute-entity__active__border-color: @color-blue1;
@steps-wizard-attribute-entity__transition: border-color .3s;

@steps-wizard-attribute-entity-title__font-size: 1.8rem;

@steps-wizard-attribute-entity-action-remove__content: @icon-delete__content;
@steps-wizard-attribute-entity-action-save__content: @icon-arrow-right__content;
@steps-wizard-attribute-entity-action-save__hover__content: @color-very-dark-gray-black2;

@steps-wizard-attribute-option-width: 100%/3;

//
//  Common
//  ---------------------------------------------

.steps-wizard {
    .attribute-entity {
        background: @steps-wizard-attribute-entity__background;
        border: 1px solid @steps-wizard-attribute-entity__border-color;
        margin: 0 0 @indent__l;
        max-width: 70rem;
        padding: @indent__s;
        transition: @steps-wizard-attribute-entity__transition;

        &.ui-sortable-helper {
            border-color: @steps-wizard-attribute-entity__active__border-color;
            cursor: -moz-grabbing;
            cursor: -webkit-grabbing;

            .draggable-handle {
                cursor: -moz-grabbing;
                cursor: -webkit-grabbing;
            }
        }

        .action-select-all,
        .action-deselect-all {
            display: inline-block;
            font-weight: @font-weight__regular;
            line-height: 1;
            margin: @indent__xs 0 0;
            padding: 0 0 0 @indent__xs;
        }

        .action-deselect-all {
            border-left: 1px solid @steps-wizard-attribute-entity__border-color;
        }

        .action-remove-all {
            display: inline-block;
            padding: 0;
            vertical-align: top;
            .lib-icon-font(
            @steps-wizard-attribute-entity-action-remove__content,
            @_icon-font: @icons-admin__font-name,
            @_icon-font-size: 1.8rem,
            @_icon-font-color: @image-gallery-icons__color,
            @_icon-font-color-hover: @image-gallery-icons__hover__color,
            @_icon-font-margin: -2px 0 0,
            @_icon-font-text-hide: true
            );
        }
    }

    .attribute-entity-top {
        .lib-vendor-prefix-display();
        margin: 0 0 @indent__s;
        &:extend(.abs-clearfix all);
    }

    .attribute-entity-title {
        display: inline;
        font-size: @steps-wizard-attribute-entity-title__font-size;
    }

    .attribute-options-block {
        display: inline-block;
        margin-left: @indent__s;
    }

    .attribute-entity-actions {
        margin-left: auto;
        white-space: nowrap;
    }

    .draggable-handle {
        &:extend(.abs-draggable-handle all);
    }

    .attribute-options {
        &:extend(.abs-list-reset-styles all);
        font-size: 0;
        margin: 0 0 @indent__s;

        .admin__field {
            + .admin__field {
                margin-top: 0;
            }
        }
    }

    .attribute-option {
        box-sizing: border-box;
        display: inline-block;
        font-size: @font-size__base;
        padding: 0 @indent__xs @indent__s 0;
        width: @steps-wizard-attribute-option-width;

        .action-save,
        .action-remove {
            .action-icon();
            padding: 0 @indent__xs;

            &:before {
                &:extend(.abs-icon all);
                content: @steps-wizard-attribute-entity-action-save__content;
            }

            &:hover {
                color: @steps-wizard-attribute-entity-action-save__hover__content;
            }

            > span {
                display: none;
            }
        }

        .action-remove {
            &:before {
                content: @steps-wizard-attribute-entity-action-remove__content;
            }
        }

        .admin__field-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }

        .admin__field-create-new {
            .admin__field-control {
                display: inline-block;
                width: 50%;
            }
        }
    }

    .admin__field-create-new {
        .admin__control-text {
            width: 100%;
        }
    }

    .action-create-new {
        font-weight: @font-weight__regular;
        padding-left: 0;
    }
}
